<template>
   <t-content class="t-content">
      <div class="subject-box">
        <div class="change-bottom" @click="leftBox"><t-icon name="chevron-left-s" size="100px" style="color:#69c3dd"></t-icon></div>
        <div ></div>
        <div v-for="(subject,index) in subjects"
        ref="subjects"
        :key="index"
        :class="{'main-subject':mode==index,'aside-subject':mode!=index}"
        :style="{ transform: 'translateX(' + translateX + 'px)' }">
        <div>
          <h1 >{{subject.name}}</h1>
          <span>{{ subject.introduce }}</span>
        </div>
        <div :style="{marginTop:'auto',alignSelf:'center'}"><t-button>确定</t-button></div>
      </div>
        
        <div class="change-bottom" @click="rightBox"><t-icon name="chevron-right-s" size="100px" style="color:#69c3dd"></t-icon></div>

      </div>
      <div class="history-box">
      <div class="history-header">
        <h1>History</h1>
      </div>
      <div class="history-footer">
        <div v-for="(item, index) in cards" :key="index">
      <t-card :style="{ width: '300px', margin: '20px 10px', backgroundColor: '#dfeeef', border: '2px solid #69c3dd'
}">
      <h1>Test</h1>     
      <div class="progress-box">
        <div class="t-progress-domo-margin">Progress</div>
      <t-progress theme="plump" :percentage="50" trackColor="#97abb0" />
    </div>
      <template #footer>
      <t-divider/>
      <div class="rounded-rectangle">
        70
      </div>
    </template>
    <template #actions>
      <t-dropdown :options="options" :min-column-width="112" @click="clickHandler">
        <t-button variant="text" shape="square">
          <more-icon />
        </t-button>
      </t-dropdown>
    </template>
  </t-card>
  </div>
</div>
</div>
    </t-content>
</template>
<script>
//import HelloWorld from './components/HelloWorld.vue'
// import { MessagePlugin } from 'tdesign-vue-next';
// import { MoreIcon } from 'tdesign-icons-vue-next';
// import { callWithAsyncErrorHandling } from 'vue';
export default {
  components: {
    // MoreIcon,
    //MessagePlugin,
   // MessagePlugin, 在template用才用register
  },
  data(){
    return {
      title:"History",
      infoMessage:"test",
      mode:1,
      translateX:0,
      distance:100,
      cards: [
      { title: 'Card 1', percentage: 50, footerText: '70', options: [] },
      { title: 'Card 2', percentage: 75, footerText: '80', options: [] },
      { title: 'Card 2', percentage: 75, footerText: '80', options: [] },
      { title: 'Card 2', percentage: 75, footerText: '80', options: [] },
      // Add more card objects as needed
    ],
      options:[
      {
        content: '操作一',
        value: 1,
      },
      {
        content: '操作二',
        value: 2,
      },
        ],
        subjects: [
          {name:'Math',introduce:'数学 [英语：mathematics，源自古希腊语μάθημα（máthēma）；经常被缩写为math或maths]，是研究数量、结构、变化、空间以及信息等概念的一门 学科 。'}
          ,{name:'English',introduce:'英语（English）属于 印欧语系 日耳曼语族 西日耳曼语支 ，最早被 中世纪 的 英国 使用，并因其广阔的殖民地而成为世界使用面积最广的 语言 。 英国人的祖先 盎格鲁 部落是后来迁移到 大不列颠岛 地区的 日耳曼 部落之一，称为 英格兰 。'}
          ,{name:'Chinese',introduce:'语文是一个多义词，通常作为语言文字、语言文学、语言文化的简称，其本义为“语言文字”。'}
          ,{name:'Physics',introduce:'物理学（physics），是研究物质最一般的运动规律和物质基本结构的学科。作为自然科学的带头学科，'}
          ,{name:'Physics',introduce:'物理学（physics），是研究物质最一般的运动规律和物质基本结构的学科。作为自然科学的带头学科，'}
        ],
      activeBox: null,
      }
    },
    
  methods:{
    leftBox() {
      if(this.mode<this.subjects.length-1)
      {
        this.mode=(Math.abs(this.mode+1))%this.subjects.length;
        this.translateX-=this.distance;
      }
    },
    rightBox() {
    if(this.mode>0)
     { this.mode=(Math.abs(this.mode-1))%this.subjects.length;
      this.translateX+=this.distance;
     }
    },
    calculateMode()
    {
      this.mode=Math.floor(this.subjects.length/2);
    },
    calculateDistance()
    {
      console.log("function start");
      //数组
      if(this.$refs.subjects)
      {
        const subjects=this.$refs.subjects;
        const rect1 = subjects[this.mode].getBoundingClientRect();
        const rect2 = subjects[this.mode+1].getBoundingClientRect();
        const midpoint1 = rect1.left + (rect1.width / 2);
        const midpoint2 = rect2.left + (rect2.width / 2);
        // this.distance =Math.round(midpoint2 - midpoint1);
        this.distance =(midpoint2 - midpoint1);
      }
      else{
        console.log("no define");
      }
    }
  },
  mounted(){
    this.calculateMode();
    this.calculateDistance();
  }
}
</script>
<style>
.t-content{
  display: flex;
  flex-direction: column;
  background-color:rgb(252,249,244);
  height: auto;
}
.t-progress-domo-margin {
  float:left;
}

.progress-box
{
  margin:10%;
}

.subject-box
{
  height: auto;
  width: 100%;
  border-color:red;
  background-color:#fcf9f4;
  flex:1;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  overflow: hidden;
}
.change-bottom
{
  width:2%;
  height:40%;
  border: 2px solid #69c3dd;
  display: flex;
  
  justify-content: center;
  align-items:center;
  background-color:#dfeeef;
  position: relative;
  z-index: 2;
}
.aside-subject{
  width:30%;
  height:30%;
  border: 2px solid #69c3dd;
  transition: transform 0.5s ease-in-out;
  background-color:#dfeeef;
  display:flex;
  flex-direction: column;
  margin-left: 2%; 
  margin-right: 2%;
  padding:24px;
  font-family: Arial, sans-serif; /* 设置字体系列 */
  font-weight: bold; /* 设置文字粗细为粗体 */
  text-align: left; /* 设置文字右对齐 */
}

.main-subject{
  height:70%;
  width:24%;
  display:flex;
  border: 2px solid #69c3dd;
  flex-direction: column;
  justify-content: flex-start;
  align-content: flex-start;
  transition: transform 0.5s ease-in-out;
  margin-left: 2%; 
  margin-right: 2%;
  background-color:#dfeeef;
  padding:24px;
  font-family: Arial, sans-serif; /* 设置字体系列 */
  font-weight: bold; /* 设置文字粗细为粗体 */
  text-align: left; /* 设置文字右对齐 */
}

.main-subject-content
{
  padding:10px;

}
.start-bottom
{
  margin-top:auto;
  margin-bottom:20px;
}
.history-box{
  display:flex;
  align-self:center;
  flex-direction:column;
  width:auto;
  margin-top:auto;
  height: auto;
  border: 2px solid #69c3dd;
  background-color:#dfeeef;
}
.history-header{
  display:flex;
  flex-direction:row;
  width:100%;
  height: 50px;
  justify-content:left;
  border-bottom: 2px solid #69c3dd;
}
.history-footer{
  display:flex;
  width:auto;
  height: auto;
  flex-wrap:wrap;
  justify-content: center;

  
}

.rounded-rectangle {
  width: 20%; /*t-card的20%*/
  height: 20px; /* 设置长方形的高度 */
  border-radius: 20px; /* 设置边框的圆角半径 */
  background-color: grey;
  color: black; /* 设置文本颜色为白色 */
  font-size: 10; /* 设置字体大小 */
  float:right;
  text-align: middle; /* 设置文本居中 */
}
</style>
